<template>
  <h2>姓名：{{ user.name }}</h2>
  <h2>薪资：{{ user.job.salary }}K</h2>
  <button @click="user.name += '!'">修改姓名</button>
  <button @click="user.job.salary++">加薪</button>
</template>

<script lang="ts">
import { reactive, watch } from "vue";

export default {
  setup() {
    let user = reactive({ name: "tom", job: { salary: 20 } });

    //使用watch监视reactive定义的对象
    //oldValue被丢失，监视不到
    //immediate: true立即监视，初始化时被执行一次
    watch(
      user,
      (newValue, oldValue) => {
        console.log("user修改了", newValue, oldValue);
      },
      { immediate: true, deep: false }
    );

    return { user };
  },
};
</script>
<style></style>
